<template>
    <div class="mask maskDown">
            <div class="box">
                <img src="@/assets/img_close.png" class="close" @click="onClose" />
                <img src="@/assets/img_free.png" class="free" />
                <div class="tit">尼斯分类表下载</div>
                <h3>下载须知</h3>
                <h4>本栏目为社会公众提供尼斯分类表下载，因系统数据信息将会随正在方针实时更新，现有分类表仅供参考，建议预留联系方式，及时接受数据更新通知。</h4>
                <p>
                    <input v-model="form.phone" type="text" class="input sjhm" placeholder="建议预留手机号码，及时接收更新通知" />
                </p>
                <p v-if="isVer">
                    <input v-model="form.code" type="text" class="input code" placeholder="请输入验证码" />
                    <button type="button" class="getCode" @click="sendSms">{{ codeText }}</button>
                </p>
                <div class="chacne-form-tip"><el-checkbox v-model="isAgree"
							size="large" /> 我已阅读并同意<span class="pri" style="color:blue"
							@click="agree = true">《个人信息与隐私保护条款》</span></div>
                <el-button id="captcha-button" class="submit" type="primary" @click="onSubmit">免费下载</el-button>
                <h5>知识产权信息服务平台 - 商标查询系统</h5>
            </div>
            <div class="tanchuang2" v-if="agree">
			<div class="xj-modal-wrap">
				<div class="xj-modal-header">
					<div class="xj-modal-title">个人信息与隐私保护条款</div>
				</div>
				<div class="xj-modal-body">
					<div class="privacy-policy-item-conform">
						<div class="form-privacy-protect-item">
                            <p style="text-indent: 0;">用户信息保护协议：</p>
                            <p>重要提示：本协议由广告客户（以下简称“我方”）制定，旨在明确您通过本网站提交个人信息时的权利义务关系。请您在提供信息前仔细阅读本协议，您的提交行为即视为已完全理解并同意本协议所有条款。
                            </p>
                            <p>一、信息收集范围与目的</p>
                            <p>1、信息类型：为实现广告推广及服务优化，您需按页面提示提供姓名、联系方式、位置信息等必要数据（统称“客户信息”）。
                            </p>
                            <p>2、使用目的：<br />
                                - 通过电话/邮件等方式向您推送商品或服务信息；<br />
                                - 支持抽奖、优惠券发放等营销活动参与；<br />
                                - 优化广告投放效果及用户行为分析；<br />
                                - 核实信息真实性，防范欺诈风险；<br />
                                - 提供页面交互功能及发送重要通知。
                            </p>
                            <p>3、拒绝权利：您可拒绝提供非必要信息，但可能影响部分服务获取。
                            </p>
                            <p>二、信息处理与共享规则</p>
                            <!--<p>4、如本服务页面涉及推荐附近门店信息的，您可自主选择填写您附近的门店，也可授权我方或蹊径获得您的地理位置信息，以实现自动在本页面向您展示您附近门店信息的功能。本页面向您申请地理位置信息，仅用于前述门店信息自动展示之目的，且仅用于当次展示。如您不同意地理位置信息的授权，您可选择“拒绝”，我方将不会自动向您推荐附近门店信息，您可通过手动选择完成该等信息的填写。</p>-->
                            <p>1、第三方合作：我方可能委托经销商、广告服务商、数据分析机构等合作伙伴处理信息，用于： <br />
                                - 实现推广目的； <br />
                                - 数据监测与技术支持； <br />
                                - 用户需求调研。
                            </p>
                            <p>2、安全保障：我方及第三方将采取加密存储、访问权限控制等措施，确保信息安全。因我方责任导致的信息泄露由我方承担全部责任</p>
                            <p>三、用户权利与义务</p>
                            <p>1、信息准确性：您需保证提交内容真实有效，如有变更请及时更新。</p>
                            <p>2、权利行使：您可随时通过客服渠道（电话/邮箱）申请： <br />
                                - 查询、更正个人信息； <br />
                                - 删除非必要信息（法律法规另有要求除外）； <br />
                                - 撤回信息处理授权。 </p>
                            <p>3. 未成年保护：未满18周岁用户需在监护人指导下使用本服务，监护人有权代为管理信息。</p>
                            <p>四、其他条款 </p>
                            <p>1. 协议更新：我方有权修订本协议，更新内容将通过网站公告形式告知。 </p>
                            <p>2. 争议解决：因本协议产生的争议，双方同意通过我方所在地人民法院诉讼解决。</p>
                            <p>五、同意声明 </p>
                            <p>当您点击“提交”或“同意”按钮时，即表示您已充分理解并同意本协议的所有条款，授权我方按本协议规定处理您的个人信息。</p>
                            <p style="text-align: right; color: #030303; padding-left:50px;">
                                <!--<b>信息咨询服务部(个体工商户)</b>-->
                            </p>
                        </div>
					</div>
				</div>
				<el-button style="width:100%;margin-top:20px" type="primary" @click="agree = false">关闭</el-button>
			</div>

		</div>
        </div>
        <div id="captcha-element"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router'
import { getSmsCode } from '@/api/customer';
import { saveCustomer } from '@/api/customer'

const props = defineProps({
    isVer: Number,
    name: String
})
const emits = defineEmits(['submit', 'close'])

const route = useRoute()
const disabled = ref(false)
const countdown = ref(60)
const agree = ref(false)
const captchaButton = ref(null)
const captcha = ref(null)
const isAgree = ref(true)
const codeText = ref('发送验证码')
const captchaIds = ref(['z3cr1uu9', '1sp88n41', '1bk2rsps'])
const form = ref({
    name: '',
    phone: '',
    company: 'ls',
    code: '',
    type: '1',
    search_keywords: '',
    first_url: ''
})

const onSubmit = () => {
    emits('submit', { ...form.value })
}

const sendSms = async () => {
    try {
        const res = await getSmsCode(form.value);
        if (res.code === 0) {
            ElMessage.success('发送成功');
            startCountdown();
        }
    } catch (error) {
        console.error('发送验证码失败:', error);
        return false
    }
}

const startCountdown = () => {
    countdown.value = 60; // Assuming countdown starts from 60 seconds
    const timer = setInterval(() => {
        if (countdown.value > 0) {
            disabled.value = true
            codeText.value = `等待 ${countdown.value} 秒`;
            countdown.value--;
        } else {
            disabled.value = false
            codeText.value = '发送验证码';
            clearInterval(timer);
        }
    }, 1000);
}

const onClose = () => {
    emits('close')
}

const getParams = async () => {
    const firstUrl = window.location.href
    form.value.first_url = firstUrl
    const cleanQueryString = firstUrl.replace(/&amp;/g, '&')
    const urlParams = new URLSearchParams(window.location.search);
    const params = {};

    for (const [key, value] of urlParams.entries()) {
        // 移除参数名和值中的空格
        const trimmedKey = key.replace(/\s+/g, '');  // 移除参数名中的空格
        const trimmedValue = value.replace(/\s+/g, '');  // 移除值中的空格
        params[trimmedKey] = trimmedValue;
    }
    form.value.words = params.words
    form.value.first_url = firstUrl
	if(params.bd_vid) {
		form.value.baidu_logid_url = cleanQueryString
	}
	if(params.qhclickid) {
		form.value.qhclickid = params.qhclickid
	}
    console.log('---------', form.value)
}

onMounted(() => {
    getParams()
    form.value.first_url = window.location.href
    // captchaButton.value = document.getElementById('captcha-button');
    // const randomArray = new Uint32Array(1);
    // window.crypto.getRandomValues(randomArray);
    // const randomIndex = randomArray[0] % captchaIds.value.length;
	// window.initAliyunCaptcha({
	// 	SceneId: captchaIds.value[randomIndex], // 场景ID。根据步骤二新建验证场景后，您可以在验证码场景列表，获取该场景的场景ID
	// 	prefix: 'wb5y8m', // 身份标。开通阿里云验证码2.0后，您可以在控制台概览页面的实例基本信息卡片区域，获取身份标
	// 	mode: 'popup', // 验证码模式。popup表示要集成的验证码模式为弹出式。无需修改
	// 	element: '#captcha-element', // 页面上预留的渲染验证码的元素，与原代码中预留的页面元素保持一致。
	// 	button: '#captcha-button', // 触发验证码弹窗的元素。button表示单击登录按钮后，触发captchaVerifyCallback函数。您可以根据实际使用的元素修改element的值
	// 	captchaVerifyCallback: captchaVerifyCallback, // 业务请求(带验证码校验)回调函数，无需修改
	// 	onBizResultCallback: onBizResultCallback, // 业务请求结果回调函数，无需修改
	// 	getInstance: getInstance, // 绑定验证码实例函数，无需修改
	// 	slideStyle: {
	// 		width: 360,
	// 		height: 40,
	// 	}, // 滑块验证码样式，支持自定义宽度和高度，单位为px。其中，width最小值为320 px
	// 	language: 'cn', // 验证码语言类型，支持简体中文（cn）、繁体中文（tw）、英文（en）
	// });
})

const captchaVerifyCallback = async (captchaVerifyParam) => {
    form.value.search_keywords = route.query.words
    form.value.captcha_verify = captchaVerifyParam
    form.value.name = ' '
	const res = await saveCustomer(form.value);
	return {
		captchaResult: res.data.captcha_result === 0 ? false : true,
		bizResult: res.code === 0 ? true : false,
	}
}
const getInstance = (instance) => {
	captcha.value = instance
}
const onBizResultCallback = (bizResult) => {
	if(bizResult) {
        emits('submit', { ...form.value })
    }
}

onBeforeUnmount(() => {
	captchaButton.value = null;

	// 必须删除相关元素，否则再次mount多次调用 initAliyunCaptcha 会导致多次回调 captchaVerifyCallback
	document.getElementById('aliyunCaptcha-mask')?.remove();
	document.getElementById('aliyunCaptcha-window-popup')?.remove();
})
</script>